<template>
  <!-- 加载中提示，可选 -->
  <div v-if="!data"
       class="bg-[url('assets/imgs/bg.jpg')] opacity-95 bg-cover bg-center h-screen text-white p-5 flex overflow-hidden justify-center align-middle">
    <div class="w-5 h-5"> Loading...</div>

  </div>
  <div class=" bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-5 flex overflow-hidden"
       v-if="data">
    <!-- 左 -->
    <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <!-- 横向柱状图 -->
      <HorizontalBar class="h-1/3 box-border pb-4" :data="data.regionData" />
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-border pb-4" :data="data.riskData" />
      <!-- 关系图 -->
      <Relation class="h-1/3" :data="data.relationData" />
    </div>
    <!-- 中 -->
    <div class="w-1/2 flex flex-col mr-5">

      <!-- 数据总揽图 -->
      <TotalData class="bg-opacity-50 bg-slate-800 p-3" :data="data.totalData" />
      <!-- 地图可视化 -->
      <MapChart class=" bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1" :data="data.mapData" />
    </div>
    <!-- 右 -->
    <div class="flex-1  bg-slate-800 p-3 flex flex-col">
      <!-- 竖向柱状图 -->
      <VerticalBar class="h-1/3 box-border pb-4" :data="data.serverData" />
      <!-- 环形图 -->
      <RingBar class="h-1/3 box-border pb-4" :data="data.abnormalData" />
      <!-- 文档云图 -->
      <WordCloud class="h-1/3" :data="data.wordCloudData" />
    </div>
  </div>
</template>
<script setup>
import HorizontalBar from './components/HorizontalBar.vue';
import MapChart from './components/MapChart.vue';
import RadarBar from './components/RadarBar.vue';
import Relation from './components/Relation.vue';
import RingBar from './components/RingBar.vue';
import TotalData from './components/TotalData.vue';
import WordCloud from './components/WordCloud.vue';
import VerticalBar from './components/VerticalBar.vue';

import { getVisualization } from './api/visualization.js'
import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue';

const data = ref(null)

const loadData = async () => {
  data.value = await getVisualization()
  console.log(data.value)
}
loadData()
// 定时获取信息
setInterval(() => {
  loadData()
}, 3000)


// 清除定时器  
onBeforeUnmount(() => {
  clearInterval(intervalId);
});

// 屏幕尺寸变化时重新加载数据  
const reload = () => {
  data.value = null;
  nextTick(() => {
    loadData()
  });
}

// 生命周期  
onMounted(() => {
  window.addEventListener('resize', reload);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', reload);
});


</script>

<style scoped></style>
